<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head lang="en">
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>jQuery Social Modal Box | Documentation</title>
	<!-- Framework CSS -->
	<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
	<!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
	<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
	<style type="text/css" media="screen">
		p, table, hr, .box { margin-bottom:25px; }
		.box p { margin-bottom:10px; }
	</style>
</head>


<body>
	<div class="container">
	
		<h3 class="center alt">&ldquo;jQuery Social Modal Box&rdquo; Documentation by &ldquo;PixelsHub&rdquo; v1.1</h3>
		
		<hr>
		
		<h1 class="center">&ldquo;jQuery Social Modal Box&rdquo;</h1>
		
		<div class="borderTop">
			<div class="span-6 colborder info prepend-1">
				<p class="prepend-top">
					<strong>
					Created: 14/8/2011<br>
					By: PixelsHub<br>
					Email: <a href="mailto:support@pixelshub.com">support@pixelshub.com</a>
					Web: <a href="http://pixelshub.com/">pixelshub.com</a><br>
					</strong>
				</p>
			</div><!-- end div .span-6 -->		
	
			<div class="span-12 last">
				<p class="prepend-top append-0">Thank you for purchasing this plugin. If you have any questions that are beyond the scope of this help file, please feel free to email us. Thanks so much!</p>
			</div>
		</div><!-- end div .borderTop -->
		
		<hr>
		
		<h2 id="toc" class="alt">Table of Contents</h2>
		<ol class="alpha">
			<li><a href="#features">Features</a></li>
			<li><a href="#installation">Installation</a></li>
			<li><a href="#parameters">Parameters</a></li>
			<li><a href="#faq">FAQ</a></li>
			<li><a href="#notice">Notice</a></li>
		</ol>
		
		<hr>
		
		<h3 id="features"><strong>A) Features</strong> - <a href="#toc">top</a></h3>
		
		<ul>
			<li>Combines <strong>3 social networks</strong> - Facebook, Google+ and Twitter</li>
			<li><strong>Cookies</strong> remember users who have already shared</li>
			<li><strong>Autoload</strong> or load after <strong>click on element</strong></li>
			<li>Warning if cookies are disabled (with customizable text)</li>
			<li>More modal boxes in one page</li>
			<li><strong>Customizable CSS</strong> with special styling for individual modals</li>
			<li>Optional countdown with optional close (with customizable text)</li>
			<li><strong>Advanced callback</strong> functions (plugin <strong>returns success</strong> (true or false), option to call callback after document loads)</li>
			<li>Can specify URL to share, don't need to specify current URL, can turn off social network button</li>
		</ul>
		
		<hr>

		<h3 id="installation"><strong>B) Installation</strong> - <a href="#toc">top</a></h3>
		
		<strong>Step One - Include The Javascript and CSS in your page header you want the pop up on.</strong>
		
		<pre>&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;css/socialmodal.css&quot;&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;http://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://platform.twitter.com/widgets.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.cookie.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.socialmodal.js&quot;&gt;&lt;/script&gt;</pre>

		<hr>
		
		<strong>Step Two - On Page Load, Call the Function</strong>
		
		<pre>&lt;script language=&quot;javascript&quot;&gt;
     
$(document).ready(function() {
	$('body').socialmodal({
		uniqueName: 'showmodal',
		count: 25,
	});
});
     
&lt;/script&gt;</pre>
		
		<hr>
		
		<h3 id="parameters"><strong>C) Parameters</strong> - <a href="#toc">top</a></h3>
		
		<i>Default values (if mention) are italic</i>
		<ul>
			<li><strong>uniqueName</strong>
				<ul>
					<li><strong>description:</strong> special name, can't exists any other ID with this name</li>
					<li><strong>possible values:</strong> 'text'</li>
					<li><strong>special usage:</strong> you can use this in CSS styling: #'uniqueName'+Outer (for example if unigueName is 'socialmodal' in CSS you can use #socialmodalOuter, #socialmodal ...</li>
				</ul>
			</li>
        	<li><strong>title</strong>
				<ul>
					<li><strong>possible values:</strong> 'text'</li>
				</ul>
			</li>
        	<li><strong>subtitle</strong>
				<ul>
					<li><strong>possible values:</strong> 'text'</li>
				</ul>
			</li>
        	<li><strong>content</strong>
				<ul>
					<li><strong>possible values:</strong> <i>null</i>, 'text'</li>
				</ul>
			</li>
        	<li><strong>count</strong>
				<ul>
					<li><strong>possible values:</strong> 0=<</li>
				</ul>
			</li>
        	<li><strong>warning</strong>
				<ul>
					<li><strong>description:</strong> text to use for warning if cookies are disabled</li>
					<li><strong>possible values:</strong> 'text'</li>
				</ul>
			</li>
        	<li><strong>facebook</strong>
				<ul>
					<li><strong>possible values:</strong> <i>null</i> (will be used current URL of page), false, 'url'</li>
				</ul>
			</li>
        	<li><strong>plusone</strong>
				<ul>
					<li><strong>possible values:</strong> <i>null</i> (will be used current URL of page), false, 'url'</li>
				</ul>
			</li>
        	<li><strong>twitter</strong>
				<ul>
					<li><strong>description:</strong> Twitter follow button or Twitter Tweet button</li>
					<li><strong>possible values:</strong> <i>null</i> (will be used TWEET button), false, 'url'</li>
				</ul>
			</li>
        	<li><strong>opacity</strong>
				<ul>
					<li><strong>description:</strong> Opacity of blackout</li>
					<li><strong>possible values:</strong> 0-1</li>
				</ul>
			</li>
        	<li><strong>manualClose</strong>
				<ul>
					<li><strong>possible values:</strong> <i>false</i> (modal is closed automatically), true (modal is not closed automatically - with default text), 'text' (modal is not closed automatically - with this text)</li>
				</ul>
			</li>
        	<li><strong>onclick</strong>
				<ul>
					<li><strong>description:</strong> ID of element after which will be modal shown</li>
					<li><strong>possible values:</strong> <i>null</i> (autoload), '#id'</li>
				</ul>
			</li>
        	<li><strong>afterDocReady</strong>
				<ul>
					<li><strong>description:</strong> if call callback on document ready</li>
					<li><strong>possible values:</strong> <i>false</i>, true</li>
				</ul>
			</li>
        	<li><strong>callback</strong>
				<ul>
					<li><strong>description:</strong> callback fired after dialog is closed, returns success (true || false) <strong>must be function</strong></li>
				</ul>
			</li>
		</ul>
		
		<hr>
		
		<h3 id="faq"><strong>D) FAQ</strong> - <a href="#toc">top</a></h3>
		
		<strong>"I don't see close button despite I have manualClose: true"</strong><br/>
		<i>Please check socialmodal.css and update path in .socialmodal .close.</i><br/><br/>
		<strong>"I can't see any modal box!"</strong><br/>
		<i>Please check if you have uniqueName and if there is not any other ID which has the same name or if any other modal box hasn't got the same name.</i><br/><br/>
		<strong>"How can I call two modal boxes?"</strong><br/>
		<i>Just always set $('body').socialmodal({ }); and then put parameters into. Remember that there can be only one autoload modal.</i><br/><br/>
		
		<hr>
		
		<h3 id="notice"><strong>E) Notice</strong> - <a href="#toc">top</a></h3>
		If you have same URL (username) to share (follow) with the same social network in two or more modals, only one callback is called!<br/>To change which is called, just change order of creating individual modals.<br/><br/>
		<hr>
		
		<p>Once again, thank you so much for purchasing this plugin. As we wrote at the beginning, we'd be glad to help you if you have any questions relating to this plguin. No guarantees, but we'll do my best to assist. If you have a more general question relating to the plugin on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.</p> 
		
		<p class="append-bottom alt large"><strong>PixelsHub.com</strong></p>
		<p><a href="#toc">Go To Table of Contents</a></p>
		
		<hr class="space">
	</div><!-- end div .container -->
</body>
</html>